
import React, { useState, useEffect } from 'react';
import './index.less';
import { getColor, rgbOpacity, colorCursor } from './config';

let corlorStatic = 'rgba(255, 0, 0, 1)';
// 取色器
let cursorDarg = false; //是否可以拖拽
let cursorStatic = {
  top: 40,
  right: 40
};
// 取色滑块
let thumbDarg = false; //是否可以拖拽
let thumbTopStatic = 0;
let thumbColorStatic = 'rgba(255,0,0,1)';
// 透明滑块
let pellucidityDarg = false; //是否可以拖拽
let pellucidityRightStatic = 0;
const ColorPicker = () => {
  const [color, setColor] = useState(corlorStatic);
  const [thumbColor, setThumbColor] = useState(thumbColorStatic);
  const [cursor, setCursor] = useState(cursorStatic);
  const [thumbTop, setThumbTop] = useState(thumbTopStatic);
  const [pellucidityRight, setPellucidityRight] = useState(pellucidityRightStatic);

  // fn 清空还原
  function clearFn() {
    setColor('');
  }
  // fn 拖拽
  function dargFn(e) {
    if (thumbDarg) dargThumbFn(e);
    if (pellucidityDarg) dargPellucidityFn(e);
    if (cursorDarg) dargCursorFn(e);
  }
  // fn 取消拖拽
  function cancelDargFn() {
    cursorDarg = false;
    thumbDarg = false;
    pellucidityDarg = false;
  }
  // fn 点击定位取色器
  function inderCursurFn(e) {
    cursorDarg = true;
    if (e.target.className.includes('ui-color-panel-left-cursor')) return;
    let right = 280 - e.nativeEvent.layerX;
    let top = e.nativeEvent.layerY;
    setCursor({
      right: right,
      top: top
    });
    setColor(colorCursor(thumbColorStatic, right / 2.8, top / 1.8));
  }
  // fn 拖拽取色器
  function dargCursorFn(e) {
    let right = cursorStatic.right - e.movementX;
    let top = cursorStatic.top + e.movementY;
    right = right < 0 ? 0 : right;
    right = right > 280 ? 280 : right;
    top = top < 0 ? 0 : top;
    top = top > 180 ? 180 : top;
    setCursor({
      right: right,
      top: top
    });
    setColor(colorCursor(thumbColorStatic, right / 2.8, top / 1.8));
  }
  // fn 点击定位取色滑块
  function inderThumbFn(e) {
    thumbDarg = true;
    if (e.target.className.includes('ui-color-silder-thumb')) return;
    setThumbTop(e.nativeEvent.layerY);
    let cortext = getColor(e.nativeEvent.layerY / 18);
    setThumbColor(cortext);
    let colorText = colorCursor(cortext, cursorStatic.right / 2.8, cursorStatic.top / 1.8);
    setColor(rgbOpacity(colorText, 1 - pellucidityRightStatic / 280));
  }
  // fn 拖拽取色滑块
  function dargThumbFn(e) {
    let top = thumbTopStatic + e.movementY;
    top = top < 0 ? 0 : top;
    top = top > 180 ? 180 : top;
    setThumbTop(top);
    let cortext = getColor(top / 18);
    setThumbColor(cortext);
    let colorText = colorCursor(cortext, cursorStatic.right / 2.8, cursorStatic.top / 1.8);
    setColor(rgbOpacity(colorText, 1 - pellucidityRightStatic / 280));
  }
  // fn 点击定位透明滑块
  function inderPellucidityFn(e) {
    pellucidityDarg = true;
    if (e.target.className.includes('ui-color-pellucidity-thumb')) return;
    let right = 280 - e.nativeEvent.layerX;
    setPellucidityRight(right);
    setColor(rgbOpacity(corlorStatic, 1 - right / 280));
  }
  // fn 拖拽透明滑块
  function dargPellucidityFn(e) {
    let right = pellucidityRightStatic - e.movementX;
    right = right < 0 ? 0 : right;
    right = right > 280 ? 280 : right;
    setPellucidityRight(right);
    setColor(rgbOpacity(corlorStatic, 1 - right / 280));
  }
  useEffect(() => {
    cursorStatic = cursor;
  }, [cursor]);
  useEffect(() => {
    thumbTopStatic = thumbTop;
  }, [thumbTop]);
  useEffect(() => {
    pellucidityRightStatic = pellucidityRight;
  }, [pellucidityRight]);
  useEffect(() => {
    thumbColorStatic = thumbColor;
  }, [thumbColor]);
  useEffect(() => {
    corlorStatic = color;
  }, [color]);
  // 拖拽事件监听
  useEffect(() => {
    window.addEventListener('mousemove', dargFn);
    window.addEventListener('mouseup', cancelDargFn);
    return () => {
      window.removeEventListener('mousemove', dargFn);
      window.removeEventListener('mouseup', cancelDargFn);
      cancelDargFn();
    };
  }, []);
  return (
    <div className="ui-color">
      {/* <div>点击</div> */}
      <div className="ui-color-content">
        {/* 色块 */}
        <div className="ui-color-panel">
          <div
            style={{
              background: thumbColor
            }}
            className="ui-color-panel-left"
            onMouseDown={inderCursurFn.bind(this)}
          >
            <span
              style={{
                top: cursor.top,
                right: cursor.right
              }}
              className="ui-color-panel-left-cursor"
            ></span>
          </div>
          {/* 取色滑块 */}
          <div className="ui-color-panel-right">
            <div className="ui-color-silder" onMouseDown={inderThumbFn.bind(this)}>
              <span style={{ top: thumbTop }} className="ui-color-silder-thumb"></span>
            </div>
          </div>
        </div>
        {/* 透明调整 */}
        <div className="ui-color-pellucidity" onMouseDown={inderPellucidityFn.bind(this)}>
          <div
            className="ui-color-pellucidity-bg"
            style={{ background: `linear-gradient(to right, rgba(12, 244, 115, 0) 0%, ${thumbColor} 100%)` }}
          ></div>
          <span style={{ right: pellucidityRight }} className="ui-color-pellucidity-thumb"></span>
        </div>
        {/* 操作区 */}
        <div className="ui-color-footer">
          <input value={color} readOnly type="text" placeholder="选取颜色" />
          <div className="ui-color-footer-right">
            <span className="ui-color-footer-board">
              <span className="ui-color-footer-board-bg" style={{ background: color }}></span>
            </span>
            <span className="ui-color-footer-clear" onClick={clearFn.bind(this)}>
              清空
            </span>
            <span className="ui-color-footer-confirm">确认</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ColorPicker;
